<template>
  <div
    v-loading="loading"
    class="content">
    <div class="select-box">
      <div class="select-group">
        <label>审核状态</label>
        <el-select
          v-model="checkStatus"
          size="small"
          placeholder="请选择"
          @change="searchBtn">
          <el-option
            v-for="item in statusOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"/>
        </el-select>
      </div>
      <div class="select-group">
        <label>发起时间</label>
        <el-date-picker
          v-model="betweenTime"
          type="daterange"
          style="padding: 0px 10px;width: 250px;"
          range-separator="-"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="searchBtn"/>
      </div>
    </div>
    <examine-section
      :id="'examine-list-box' + by"
      :list="list"
      class="list-box"
      @handle="searchBtn">
      <p
        slot="load"
        class="load">
        <el-button
          :loading="loadMoreLoading"
          type="text">{{ loadMoreLoading ? '加载更多' : '没有更多了' }}</el-button>
      </p>
    </examine-section>
  </div>
</template>

<script>
import {
  oaExamineMyCreateIndex,
  oaExamineMyExamineIndex
} from '@/api/oamanagement/examine'
import ExamineSection from './examineSection'

export default {
  components: {
    ExamineSection
  },
  props: {
    // 类型 my我发起的,examine我审批的
    by: String,
    // 审批类型ID
    categoryId: [String, Number]
  },
  data() {
    return {
      loading: false,
      loadMoreLoading: true,
      checkStatus: this.by == 'examine' ? '1' : '',
      betweenTime: [],
      list: [],
      // 判断是否发请求
      isPost: false,
      page: 1
    }
  },
  computed: {
    statusOptions() {
      if (this.by == 'examine') {
        return [
          { label: '待我审批的', key: '1' },
          { label: '我已审批的', key: '2' }
        ] // 1待我审批的、2我已审批的
      } else {
        return [
          { label: '全部', key: '' },
          { label: '待审', key: '0' },
          { label: '审批中', key: '3' },
          { label: '通过', key: '1' },
          { label: '失败', key: '2' },
          { label: '撤回', key: '4' }
        ]
      }
    }
  },
  watch: {
    categoryId: function(params) {
      this.page = 1
      this.list = []
      this.getList()
    }
  },
  mounted() {
    // 分批次加载
    const dom = document.getElementById('examine-list-box' + this.by)
    dom.onscroll = () => {
      const scrollOff = dom.scrollTop + dom.clientHeight - dom.scrollHeight
      // 滚动条到底部的条件
      if (Math.abs(scrollOff) < 10 && this.loadMoreLoading == true) {
        if (!this.isPost) {
          this.isPost = true
          this.page++
          this.getList()
        } else {
          this.loadMoreLoading = false
        }
      }
    }

    this.getList()
  },
  methods: {
    /** 获取列表数据 */
    getList() {
      this.loading = true
      const params = {
        page: this.page,
        limit: 15,
        categoryId: this.categoryId
      }
      if (this.by == 'examine') {
        params.status = this.checkStatus
      } else {
        params.checkStatus = this.checkStatus
      }

      if (this.betweenTime && this.betweenTime.length > 0) {
        params.startTime = this.betweenTime[0]
        params.endTime = this.betweenTime[1]
      }

      const request = {
        my: oaExamineMyCreateIndex,
        examine: oaExamineMyExamineIndex
      }[this.by]
      request(params)
        .then(res => {
          this.list = this.list.concat(res.data.list)
          if (res.data.list.length < 15) {
            this.loadMoreLoading = false
          } else {
            this.loadMoreLoading = true
          }
          this.isPost = false
          this.loading = false
        })
        .catch(() => {
          this.isPost = false
          this.loading = false
        })
    },
    // 搜索
    searchBtn() {
      this.list = []
      this.page = 1
      this.getList()
    },
    // 重置
    resetBtn() {
      this.checkStatus = 'all'
      this.betweenTime = []
      this.$emit('reset')
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../styles/content.scss';
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  .select-box {
    margin: 10px 0 20px;
    .select-group {
      margin-right: 20px;
      display: inline-block;
      label {
        @include color9;
        margin-right: 10px;
      }
      .el-select {
        width: 116px;
        height: 30px;
      }
    }
    .btn-box {
      float: right;
      margin-right: 10px;
    }
  }
  .list-box {
    overflow: auto;
    padding-right: 30px;
  }
}

.load {
  color: #999;
  font-size: 13px;
  margin: 0 auto 15px;
  text-align: center;
  .el-button,
  .el-button:focus {
    color: #ccc;
    cursor: auto;
  }
}
</style>
